<!-- 分机构列表 -->
<template>
  <div class="web">
    <!-- 搜索 -->
    <el-card>
      <el-form ref="ruleFormRef" :inline="true" class="demo-form-inline" :model="params">
        <el-form-item label="机构名称：">
          <el-input v-model="params.key" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="管理姓名：">
          <el-input v-model="params.name" clearable placeholder="请输入" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="customerTable">
        <template #btns="{ deleteAll }">
          <el-button type="primary" @click="uploadEdit(undefined)">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增
          </el-button>

          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button type="primary" :icon="Edit" text @click="uploadEdit(scope.row)">
            编辑
          </el-button>

          <el-button type="danger" :icon="Delete" text @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
        </template>
      </ELTable>
      <!-- 添加 -->
      <AddBranch
        v-if="dialogVisible"
        v-model="dialogVisible"
        :listParams="listParams"
        @close="handelClose"
      />
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { branchAddParams, CompanyList } from "@/api/branch/type";
import { delCompany, delMany, getCompanyList } from "@/api/branch/company";
import AddBranch from "@/components/branch/AddBranch.vue";
import { Delete, Edit, Message, Document, Search, Refresh } from "@element-plus/icons-vue";
import type { FormInstance, Action } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
const dialogVisible = ref(false);
const router = useRouter();
const input = ref("");
const customerTable = ref();
const ruleFormRef = ref<FormInstance>();

let listParams = reactive<branchAddParams>({
  address: "",
  adminMobile: "",
  adminName: "",
  adminPwd: "",
  adminUserName: "",
  city: "",
  id: 0,
  name: "",
  province: "",
});

// 关闭弹框
const handelClose = () => {
  dialogVisible.value = false;
  customerTable.value.getData();
};

//搜索参数
const params = reactive<CompanyList>({
  page: 1,
  pageSize: 10,
  name: "",
  key: "",
});

// 查询
const search = () => {
  customerTable.value.getData(params);
  // console.log("查询", params);
};
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 编辑
const uploadEdit = (id: any) => {
  listParams = id;
  dialogVisible.value = true;
  // resetForm(); // 清除表单数据
};

const tableConfig = reactive<TableData>({
  loadData: getCompanyList,
  delete: delCompany,
  deleteAll: delMany,

  columns: [
    {
      prop: "id",
      label: "序号",
    },
    {
      prop: "name",
      label: "机构名称",
    },
    {
      prop: "address",
      label: "区域",
    },
    {
      prop: "adminName",
      label: "管理员姓名",
    },
    {
      prop: "adminMobile",
      label: "联系电话",
    },
    {
      prop: "adminId",
      label: "管理员账号",
    },
    {
      prop: "adminPwd",
      label: "管理员密码",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: { width: "200px" },
    },
  ],
});
</script>
<style scoped>
.web {
  margin: 10px;
}

.web_top {
  display: flex;

  /* justify-content:space-betwee; */
}

.web_top > div {
  margin-left: 32px;
}

.card {
  margin-top: 10px;
}
</style>
